'use client';
import { FC } from 'react';
import Example from './mdx.mdx';
import SyntaxHighlighter from 'react-syntax-highlighter';

export const meta = {
	title: 'MDX Example',
	description: 'An example of using MDX with Next.js'
};

type CodeProps = {
	className: string;
	children: string | string[];
};
// #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------

function Cookies() {
	const basePath = process.env.BASE_PATH;
	return (
		<>
			<Example components={{ Code }} basePath={basePath} />
		</>
	);
}

const Code: FC<CodeProps> = ({ className, ...properties }) => {
	const match = /language-(\w+)/.exec(className || '');
	return match ? <SyntaxHighlighter language={match[1]} PreTag="div" {...properties} /> : <code className={className} {...properties} />;
};

export default Cookies;
